<template>
  <div class="time_class_none">
    <el-select
      v-model="timelist"
      multiple
      filterable
      allow-create
      style="width: 800px"
      default-first-option
      placeholder="请选择"
      :multiple-limit="4"
      ref="select"
      @remove-tag="removeFun"
      value-key="item"
    >
      <div slot="empty" value="" style="height: 85px; padding: 0">
        <div class="time_flex">
          <div>
            <el-time-picker
              class="el_time_picker_zindex"
              is-range
              v-model="value1"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              value-format="HH:mm"
              format="HH:mm"
              selectableRange="00:00:00 - 24:00:00"
              @change="istime"
              @focus="istime2"
              @blur="istime3"
            >
            </el-time-picker>
          </div>
          <div>
            <el-button class="btn" @click="yestime">确定</el-button>
          </div>
        </div>
      </div>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: ["09:00", "18:00"],
      timelist: [],
      list: [],
      crossConnection: [], //
    };
  },
  props: ["times", "type"],
  mounted() {},
  activated() {
    this.list = [];
    this.timelist = [];
    this.crossConnection = [];
  },
  methods: {
    fun() {
      if (this.times.length > 0) {
        this.timelist = this.times;
      }
    },
    istime(e) {
      this.$refs.select.focus();
    },
    istime2(e) {
      this.$refs.select.focus();
    },
    istime3(e) {
      this.$refs.select.focus();
    },
    isfou() {
      this.$refs.select.focus();
    },
    yestime() {
      if (this.value1[0] != "" && this.value1[1] != "") {
        if (this.value1[0] == this.value1[1]) {
          this.$message.warning("开始时间和结束时间不能相同，请重新选择！");
        } else {
          if (this.timelist.length == 4) {
            this.timelist.splice(0, 1);
            this.list.splice(0, 1);
          }
          this.crossConnection.push({
            startTime: this.value1[0],
            endTime: this.value1[1],
          });
          if (this.repeatTime(this.crossConnection)) {
            this.timelist.push(`${this.value1[0]}-${this.value1[1]}`);
            let tiemlist = {};
            tiemlist = {
              start_time: this.value1[0],
              end_time: this.value1[1],
            };
            this.list.push(tiemlist);

            const startArr = this.value1[1].split(":");
            let num1 = +startArr[0];
            let num2 = +startArr[1];
            if (num2 + 1 === 60) {
              num2 = "00";
              num1 += 1;
            } else {
              num2 += 1;
            }
            if ((num2 + "").length === 1) num2 = `0${num2}`;
            if (+num1 > 23) num1 = "00";
            this.value1 = [`${num1}:${num2}`, "23:59"];
            /*  */
            /* this.timelist = this.joinTime(this.timelist);
            const objArr = this.timelist.reduce((memo, time) => {
              const arr = time.split("-");
              return [...memo, { start_time: arr[0], end_time: arr[1] }];
            }, []); */
            /*  */

            this.$emit("timeFun", this.list, this.type);
          } else {
            this.$message.warning("预约时间段有交叉，请重新选择！");
            this.crossConnection.pop();
          }
        }
      }
    },
    // 判断时间是否有交叉
    repeatTime(arr) {
      for (var k in arr) {
        if (!this.judege(k, arr)) {
          return false;
        }
      }
      return true; //true 不重复 false为重复
    },
    // 判断时间是否有交叉
    judege(index, arr) {
      for (var k in arr) {
        if (index !== k) {
          //判断交叉时间是从第一个对象对比除了本身之外的开始时间和结束时间，如果开始时间在对比对象的开始时间和结束时间之间，或者结束时间在对比对象的开始时间和结束时间之间则是交叉。
          if (
            arr[k].startTime <= arr[index].startTime &&
            arr[k].endTime >= arr[index].startTime
          ) {
            return false;
          }
          if (
            arr[k].startTime <= arr[index].endTime &&
            arr[k].endTime >= arr[index].endTime
          ) {
            return false;
          }
        }
      }
      return true;
    },
    removeFun() {
      let dateTimeOne = [];
      let timeTwo = [];
      this.timelist.map((item, index) => {
        dateTimeOne.push(item.split("-"));
      });
      this.crossConnection = [];
      dateTimeOne.map((item) => {
        let b = { start_time: item[0], end_time: item[1] };
        this.crossConnection.push({
          startTime: item[0],
          endTime: item[1],
        });
        timeTwo.push(b);
      });
      this.list = timeTwo;
      this.$emit("timeFun", timeTwo, this.type);
    },
  },
};
</script>

<style lang="scss" scoped>
.time_flex {
  height: 85px;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  > div:first-child {
    padding-top: 10px;
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
  }
  > div:last-child {
    text-align: right;
  }
  .btn {
    margin-right: 10px;
    margin-bottom: 5px;
    color: $textColorgreen;
  }
}
</style>
<style lang="scss">
.time_class_none {
  .el-select-dropdown__item .hover {
    padding: 0;
  }
}
</style>
